<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" session="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name = "viewport" content = "initial-scale = 1, user-scalable = no">
<title>引导页</title>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8"/>
<!--IE的兼容-->
<!--[if IE]>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/html5.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/excanvas.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/plugins/boxgrid/css/default.css" />


<!--必要样式-->

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/plugins/boxgrid/css/component.css?v=0313.1" />
    <script src="${pageContext.request.contextPath}/static/js/jquery-1.11.3.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/common.js"></script>
        <script src="${pageContext.request.contextPath}/static/js/jquery.form.js" type="text/javascript"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/plugins/boxgrid/js/modernizr.custom.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/plugins/boxgrid/js/Chart2.js"></script>
<%-- <script type="text/javascript" src="${pageContext.request.contextPath}/static/plugins/boxgrid/js/utils.js"></script> --%>
<%-- <script type="text/javascript" src="${pageContext.request.contextPath}/static/plugins/boxgrid/js/Chart.bundle.js"></script> --%>
<style>
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/logo.gif',
sizingMethod='scale');

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/logo.gif',
sizingMethod='scale')";

*{
	padding:0;
	margin:0;
	box-size:border-box;
}
.container{
	text-align:center;
	width:100%;
	position:relative;
}
body{
	width:100%;
	height:100%;
	_background-attachment:fixed;
	_background-image:url(about:blank);
	background:url(${pageContext.request.contextPath}/static/plugins/boxgrid/image/beijing.png);
	}
	.divcan{
		width: 17.5%;
		position:relative;
		top:20px;
		top:30px\9;
		*+top:20px;
	  	float:left;
	   	padding:10px 0;
	   	*+padding:0px 0;
	}
	canvas{
			display:block;
         	margin:0 auto;
			behavior: url(/public/ie-css3.htc);
         }
       .divcanfirst{
			margin-left:5%;
		}
		.divcanend{
			margin-right:5%;
		}

	.divB{
		   display:block;
        	margin:0 auto;
        	height: 8%;
   		    margin-left: 40%;
        }
		.tipdiv{
			display: inline-block;
		}
		.tipdiv2{
		    margin-left: 8%;
		}
		.tip{
			color: #756b6b;
		    font-family: 微软雅黑;
		    font-size: 1.5em;
			text-align:center
			width:100%;
			height:30px;
    	}
    	.tipdivtop{
    		 height: 50%;
    	}

    	.tipdivleft{
    		height: 80%;
    		width: 0.3em;

    	}
    	.tipdivright{
    		color: #756b6b;
		    font-family: 微软雅黑;
		    font-size: 1em;
    	}
    	.tipdivright2{
    		color: #756b6b;
		    font-family: 微软雅黑;
		    font-size: 0.7em;
    	}
    	.container .main1{
    		width: 60%;
			padding:0.2rem;
		    margin: 0 auto;
		    margin-bottom: 1%;
			background:url(${pageContext.request.contextPath}/static/plugins/boxgrid/image/juxing.png) no-repeat center !important;
			background-size:cover;
			position:relative;
			<!--behavior: url(${pageContext.request.contextPath}/static/js/backgroundsize.min.htc);
		    -ms-behavior: url(${pageContext.request.contextPath}/static/js/backgroundsize.min.htc);-->
    }
	    .main2{
			width: 60%;
			height:46px;
			margin: 0 auto;
			background-color: #c6e8fd;
			margin-bottom: 1%
	    }
	    .main2Leftdiv{
	        width: 40%;
		    height: 46x;
		    background-color: #178fff;
		    display:table;
		    overflow:hidden;
		    border: #178fff;
		    font-weight: bold;
		    float: right;
			color:#fff;
	    }
		.main2Leftdiv h1{
			height:46px;
		}
	    .main2Leftspan{
	    	color: white;
	    	font-size: 2em;
	    }
	    .main2righttspan{
	    	color: #333333;
	    	font-size: 1.2em;
	    	font-weight: bold;
	    }
	    .main2Rightdiv{
	        width: 60%;
		    height: 42px;
		   float: right;

	    }
	    .main2Rightdiv3{
	    	height:100%;
	    	 display:table;
		    overflow:hidden;
		    float: left;
	    }
	    .main2Rightdiv4{
	    	 display:table;
		    overflow:hidden;
		    float: left;
	    }
	    .left{
	    	position:fixed;
	    	<!--position:absolute\9;-->
		    width: 20%;
			left:0%;
			*+right:80%;
		    bottom: 10%;
			*+bottom: 20%;
		    text-align: center;
			color: white;
	    	font-family: 微软雅黑;
	    }
	    .right{
	    	position: fixed;
	    	<!--position:absolute\9;-->
		    width: 20%;
		    bottom: 10%;
			*+bottom: 20%;
		    right:10%;
		    text-align:center;
		    z-index:9999;
	    }
	    .rightTop{
	    	margin-bottom: 45%;
			*+margin-bottom: 5%;
	    }

	    .time1{
		    font-size: 2.5em;
		    float: right;
		    margin-right: 10px;
	    }
	    .time2{
		    float: right;
		    margin-right: 1em;
	    }
	    .time2-1{
		    font-size: 1.2em;
	    }
	    .time2-2{
		    font-size: 1.2em;
	    }
    	#vc {
			display:inline; <!--float的div在IE下margin加倍的兼容写法-->
			text-align:center;
			height: 8%;
			width: 100%;
			margin-top: 5%;
			float: left;
			}
    	#vc2 { display:table;
			height: 8%;width: 60%;
			margin-top: 5%;padding-left: 10%;
			overflow:hidden; float: left;
			}
		#vci { vertical-align:middle; display:table-cell;text-align:center; _position:absolute; _top:50%; _left:50%; }
		#content {  display:inline-block;width:100%; _position:relative; _top:-50%; _left:-50%; font-family: 微软雅黑;

		}
		.main{
			width:60%;
			position:relative\9;
			left:0px\9;
			*left:0px;
		}
		.main1{
			background-position:0 center;
		}
		#rb-grid .rb-span-2{
		 width:42%\0;
		 *+width:35%;
		}
		.rb-grid li{
			width:27%;
			*+width: 20.5%;
		}
		#rb-grid .rb-span-2{
			width:42%;
			*+width:34%;
		}
</style>
</head>
<body>
	<!--<div class="bg">
		<img id="backimg" alt="" src="${pageContext.request.contextPath}/static/plugins/boxgrid/image/beijing.png;"
	</div>>-->

<div class="container" id="container">
	<div class="main2" id="">
		<div class="main2Rightdiv">
		<h1  style="float: right;margin-right: 50px;height:46px;font-size: 1.2em; line-height:46px;">${selfname}</h1>
			<!--<div style="float: right;margin-right: 50px;height: 100%;">
				<div  style="height: 100%;">
					<div class="main2Rightdiv3">

						<div id="vci" >
							<div id="content">
								<font class="main2righttspan">${selfname}</font>
							</div>
						</div>
					</div>
				</div>
			</div-->
		</div>
		<div class="main2Leftdiv">
			<h1>互联网+管理系统</h1>
			<!--<div id="vci">
				<div id="content">
					<font class="main2Leftspan">互联网+管理系统</font>
				</div>
			</div>-->
		</div>
	</div>
	<div class="main1" id="pie">
			<div class="divcan divcanfirst" id="divcan1">
				<canvas id="myCanvas" ></canvas>
				<p class="tip">住户</p>
				<!--<div id="vc">
					<div id="vci">
						<div id="content">
							<p class="tip">住户  </p>
						</div>
					</div>
				</div>-->
			</div>
			<div class="divcan">
				<canvas id="canvas2" ></canvas>
				<p class="tip">评论</p>
				<!--<div id="vc">
					<div id="vci">
						<div id="content">
							<p class="tip">评论  </p>
						</div>
					</div>
				</div>-->
			</div>
			<div class="divcan">
				<canvas id="canvas3" ></canvas>
				<p class="tip">发帖</p>
				<!--<div id="vc">
					<div id="vci">
						<div id="content">
							<p class="tip">发帖  </p>
						</div>
					</div>
				</div>-->
			</div>
			<div class="divcan">
				<canvas id="canvas4" ></canvas>
				<p class="tip">开门记录</p>
				<!--<div id="vc">
					<div id="vci">
						<div id="content">
							<p class="tip">开门记录</p>
						</div>
					</div>
				</div>-->
			</div>
			<div class="divcan">
				<canvas id="canvas5" ></canvas>
				<p class="tip">点赞</p>
				<!--<div id="vc">
					<div id="vci">
						<div id="content">
							<p class="tip">点赞 </p>
						</div>
					</div>
				</div>-->
			</div>
			<div class="" style="position: absolute;right: 3%;top:11%;*right: 3%;*top:10%;left:-22px\0;top:30px\0;position:relative\0;">
				<div class="tipdivright2"><span>浅：一周</br>深：全部</span></div>
			</div>
	</div>


	<div class="main">
		<ul id="rb-grid" class="rb-grid clearfix">
			<c:forEach items="${homemenus}" var="sysmenu" varStatus="status">
				<c:if test="${status.index%9==1 || status.index%9==3 || status.index%9==8}">
					<li class="rb-span-2 bg_${status.index}" onclick="towhere('${pageContext.request.contextPath}${sysmenu.mUrl}','${sysmenu.sid}')">
						<span><img src="${pageContext.request.contextPath}/static/plugins/boxgrid/image/${sysmenu.picName}" alt=""></span><span class="rb-temp rb-grid-span2">${sysmenu.mName}</span>
					</li>
				</c:if>
				<c:if test="${status.index%9!=1 && status.index%9!=3 && status.index%9!=8}">
					<li class="bg_${status.index}" onclick="towhere('${pageContext.request.contextPath}${sysmenu.mUrl}','${sysmenu.sid}')">
						<span><img src="${pageContext.request.contextPath}/static/plugins/boxgrid/image/${sysmenu.picName}" alt=""></span><span class="rb-temp rb-grid-span">${sysmenu.mName}</span>
					</li>
				</c:if>
			</c:forEach>
		</ul>
	</div>
	<div class="left">
			<div class="time2">
				<div class="time2-1" id="time2"></div>
				<div class="time2-2" id="time3"></div>
			</div>
			<div class="time1" id="time1"></div>
	</div>
	<div class="right">
		<div class="rightTop"><img alt="向下" title="向下" src="${pageContext.request.contextPath}/static/plugins/boxgrid/image/down.png" onclick="down()" style="cursor:pointer"></div>
		<div class="rightDowm"><img alt="退出系统" title="退出系统" src="${pageContext.request.contextPath}/static/plugins/boxgrid/image/tuichu.png" onclick="logout()" style="cursor:pointer"></div>
	</div>
</div><!-- /container -->

<script type="text/javascript" src="${pageContext.request.contextPath}/static/plugins/boxgrid/js/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/plugins/boxgrid/js/jquery.fittext.js"></script>

<script type="text/javascript">

	var data = ${dataList};
	switch ('${userRole}') {
	case '1':
	case '2':
		var userallnum = data[2].COUNTNUM;
		var usernum = data[2].Z;
		var albumallnum = data[7].COUNTNUM;//发帖
		var albumnum = data[7].Z;
		var commentallnum = data[8].COUNTNUM;//评论
		var commentnum = data[8].Z;
		var likeallnum = data[9].COUNTNUM;//点赞
		var likenum = data[9].Z;
		var openlogallnum = data[13].COUNTNUM;//开门记录
		var openlognum = data[13].Z;

		break;
	case '3':
	case '4':
		var userallnum = data[1].COUNTNUM;
		var usernum = data[1].Z;
		var albumallnum = data[6].COUNTNUM;//发帖
		var albumnum = data[6].Z;
		var commentallnum = data[7].COUNTNUM;//评论
		var commentnum = data[7].Z;
		var likeallnum = data[8].COUNTNUM;//点赞
		var likenum = data[8].Z;
		var openlogallnum = data[12].COUNTNUM;//开门记录
		var openlognum = data[12].Z;
		break;
	case '5':
	case '6':
		var userallnum = data[0].COUNTNUM;
		var usernum = data[0].Z;
		var albumallnum = data[5].COUNTNUM;//发帖
		var albumnum = data[5].Z;
		var commentallnum = data[6].COUNTNUM;//评论
		var commentnum = data[6].Z;
		var likeallnum = data[7].COUNTNUM;//点赞
		var likenum = data[7].Z;
		var openlogallnum = data[11].COUNTNUM;//开门记录
		var openlognum = data[11].Z;
		break;
	default:
		var userallnum = 1;
		var usernum = 0;
		var albumallnum = 1;//发帖
		var albumnum = 0;
		var commentallnum = 1;//评论
		var commentnum = 0;
		var likeallnum = 1;//点赞
		var likenum = 0;
		var openlogallnum = 1;//开门记录
		var openlognum = 1;
	break;
		break;
	}

	if(userallnum == 0){
		userallnum = 1;
	}
	if(albumallnum == 0){
		albumallnum = 1;
	}
	if(commentallnum == 0){
		commentallnum = 1;
	}
	if(openlogallnum == 0){
		openlogallnum = 1;
	}
	if(likeallnum == 0){
		likeallnum = 1;
	}
	$("#user1").html(usernum);
	$("#user2").html(userallnum);
	$("#album1").html(albumnum);
	$("#album2").html(albumallnum);
	$("#comment1").html(commentnum);
	$("#comment2").html(commentallnum);
	$("#openlog1").html(openlognum);
	$("#openlog2").html(openlogallnum);
	$("#like1").html(likenum);
	$("#like2").html(likeallnum);

// 	var config = {
// 	        type: 'pie',
// 	        data: {
// 	            datasets: [{
// 	                data: [
// 	                    usernum,
// 	                    userallnum,
// 	                ],
// 	                backgroundColor: [
// 						"#3fa8ff",
// 						"#2380ce"
// 	                ],
// 	                label: 'Dataset 1'
// 	            }],
// 	            labels: [
// 	                     "一周",
// 	                     "全部"
// 	            ]
// 	        },
// 	        options: {
// 	            responsive: true
// 	        }
// 	    };
// 	var config2 = {
// 	        type: 'pie',
// 	        data: {
// 	            datasets: [{
// 	                data: [
// 	                    commentnum,
// 	                    commentallnum,
// 	                ],
// 	                backgroundColor: [
// 						"#ff9900",
// 						"#ba6f00"
// 	                ],
// 	                label: 'Dataset 1'
// 	            }],
// 	            labels: [
// 					"一周",
// 					"全部"
// 	            ]
// 	        },
// 	        options: {
// 	            responsive: true
// 	        }
// 	    };
// 	var config3 = {
// 	        type: 'pie',
// 	        data: {
// 	            datasets: [{
// 	                data: [
// 	                    albumnum,
// 	                    albumallnum,
// 	                ],
// 	                backgroundColor: [
// 						"#0f7cd9",
// 						"#1250b0"
// 	                ],
// 	                label: 'Dataset 1'
// 	            }],
// 	            labels: [
// 	 					"一周",
// 						"全部"
// 	            ]
// 	        },
// 	        options: {
// 	            responsive: true
// 	        }
// 	    };
// 	var config4 = {
// 	        type: 'pie',
// 	        data: {
// 	            datasets: [{
// 	                data: [
// 	                    openlognum,
// 	                    openlogallnum,
// 	                ],
// 	                backgroundColor: [
// 						"#f5624d",
// 						"#ca301a"
// 	                ],
// 	                label: 'Dataset 1'
// 	            }],
// 	            labels: [
// 	 					"一周",
// 						"全部"
// 	            ]
// 	        },
// 	        options: {
// 	            responsive: true
// 	        }
// 	    };
// 	var config5 = {
// 	        type: 'pie',
// 	        data: {
// 	            datasets: [{
// 	                data: [
// 	                    likenum,
// 	                    likeallnum,
// 	                ],
// 	                backgroundColor: [
// 						"#21b3ec",
// 						"#1b67a6"
// 	                ],
// 	                label: 'Dataset 1'
// 	            }],
// 	            labels: [
// 	 					"一周",
// 						"全部"
// 	            ]
// 	        },
// 	        options: {
// 	            responsive: true
// 	        }
// 	    };
	var pieData = [
				{
					value: usernum,
					color:"#3fa8ff",
					label: "一周"
				},
				{
					value : userallnum,
					color : "#2380ce",
					label: "全部"
				}

			];
		var pieData2 = [
				{
					value: commentnum,
					color:"#ff9900",
					label: "一周"
				},
				{
					value : commentallnum,
					color : "#ba6f00",
					label: "全部"
				}

			];
		var pieData3 = [
				{
					value: albumnum,
					color:"#0f7cd9",
					label: "一周"
				},
				{
					value : albumallnum,
					color : "#1250b0",
					label: "全部"
				}

			];
		var pieData4 = [
				{
					value: openlognum,
					color:"#f5624d",
					label: "一周"
				},
				{
					value : openlogallnum,
					color : "#ca301a",
					label: "全部"
				}

			];
		var pieData5 = [
				{
					value: likenum,
					color:"#21b3ec",
					label: "一周"
				},
				{
					value : likeallnum,
					color : "#1b67a6",
					label: "全部"
				}

			];
	$(window).resize(resizeCanvas);
	resizeCanvas();
	startTime();
	function resizeCanvas() {
		var width=$(window).get(0).innerWidth/12;
		var height=$(window).get(0).innerHeight/12;
		var length;
		if(parseInt(width)>parseInt(height))
		{
			height = width;
		}else{
			width = height;
		}
	   <!--$("#myCanvas").attr("width", width);-->
		 <!--$("#myCanvas").attr("height", height);  -->
		 <!--$("#canvas2").attr("width", width);  -->
		 <!--$("#canvas2").attr("height", height); -->
		 <!--$("#canvas3").attr("width", width);  -->
		 <!--$("#canvas3").attr("height", height);-->
		 <!--$("#canvas4").attr("width", width);  -->
		 <!--$("#canvas4").attr("height", height);-->
		 <!--$("#canvas5").attr("width", width);  -->
		 <!--$("#canvas5").attr("height", height);-->



//		new Chart(document.getElementById("canvas").getContext("2d")).Pie(pieData);
//		new Chart(document.getElementById("canvas2").getContext("2d")).Pie(pieData2);
//		new Chart(document.getElementById("canvas3").getContext("2d")).Pie(pieData3);
//		new Chart(document.getElementById("canvas4").getContext("2d")).Pie(pieData4);
//		new Chart(document.getElementById("canvas5").getContext("2d")).Pie(pieData5);

		var myCanvas = document.getElementById("myCanvas");
		myCanvas.width=120;
		myCanvas.height=120;
		if(typeof window.G_vmlCanvasManager!="undefined"){
			myCanvas=window.G_vmlCanvasManager.initElement(myCanvas);
			var ctx= myCanvas.getContext("2d");
		}else{
			var ctx= myCanvas.getContext("2d");
		}
		window.myPie = new Chart(ctx).Pie(pieData);

		var  canvas2= document.getElementById("canvas2");
		canvas2.width=120;
		canvas2.height=120;
		if(typeof window.G_vmlCanvasManager!="undefined"){
			canvas2=window.G_vmlCanvasManager.initElement( canvas2);
			var ctx2=  canvas2.getContext("2d");
		}else{
			var ctx2=  canvas2.getContext("2d");
		}
		window.myPie2 = new Chart(ctx2).Pie(pieData2);

		var canvas3 = document.getElementById("canvas3");
		canvas3.width=120;
		canvas3.height=120;
		if(typeof window.G_vmlCanvasManager!="undefined"){
			canvas3=window.G_vmlCanvasManager.initElement(canvas3);
			var ctx3=  canvas3.getContext("2d");
		}else{
			var ctx3=  canvas3.getContext("2d");
		}
		window.myPie3 = new Chart(ctx3).Pie(pieData3);

		var canvas4= document.getElementById("canvas4");
		canvas4.width=120;
		canvas4.height=120;
		if(typeof window.G_vmlCanvasManager!="undefined"){
			canvas4=window.G_vmlCanvasManager.initElement(canvas4);
			var ctx4=  canvas4.getContext("2d");
		}else{
			var ctx4=  canvas4.getContext("2d");
		}
		window.myPie4 = new Chart(ctx4).Pie(pieData4);

		var canvas5 = document.getElementById("canvas5");
		canvas5.width=120;
		canvas5.height=120;
		if(typeof window.G_vmlCanvasManager!="undefined"){
			canvas5=window.G_vmlCanvasManager.initElement(canvas5);
			var ctx5=  canvas5.getContext("2d");
		}else{
			var ctx5=  canvas5.getContext("2d");
		}
		window.myPie5 = new Chart(ctx5).Pie(pieData5);
// 		 var ctx = document.getElementById("canvas").getContext("2d");
// 	        window.myPie = new Chart(ctx, config);
// 		 var ctx = document.getElementById("canvas2").getContext("2d");
// 	        window.myPie2 = new Chart(ctx, config2);
// 		 var ctx = document.getElementById("canvas3").getContext("2d");
// 	        window.myPie3 = new Chart(ctx, config3);
// 		 var ctx = document.getElementById("canvas4").getContext("2d");
// 	        window.myPie4 = new Chart(ctx, config4);
// 		 var ctx = document.getElementById("canvas5").getContext("2d");
// 	        window.myPie5 = new Chart(ctx, config5);
		var pieheight=$("#divcan1").outerHeight()+40;
		$("#pie").attr("style","height:"+pieheight+"px");
		var containerheight=$("#container").outerHeight()+100;
		$("#backimg").attr("style","height:"+containerheight+"px")
};

function towhere(url,id){
		if(url==""){
			post('${pageContext.request.contextPath}/admin/defaultIndex.action', {mpid :id});
		}else{
			post(url,{mpid:id});
		}

	};

	function startTime() {
        var today = new Date();
        var y = today.getFullYear();
        var M = today.getMonth()+1;
        var d = today.getDate();
        var w = today.getDay();
        var h = today.getHours();
        var m = today.getMinutes();
        var s = today.getSeconds();
        var week=['星期天','星期一','星期二','星期三','星期四','星期五','星期六'];
        // add a zero in front of numbers<10
        m = checkTime(m);
        s = checkTime(s);
        $('#time1').html(h+':'+m);//可改变格式
        $('#time2').html(week[w]);
        $('#time3').html(y+'/'+M+'/'+d);
        t = setTimeout(startTime, 30000);
        function checkTime(i) {
            if (i < 10) {
                i = "0" + i;
            }
            return i;
        }
    }
    function down(){
    	$(document).scrollTop(400);
    }
    var url = "<%=request.getContextPath()%>";
    function logout() {
        window.location.href = url + "/logout";
    }
</script>

</body>
</html>
